<template>
    <div id="cheader">
        <div class="mheader">
            <div class="header_left">
                <div style="pointer-events: none;">
                    <img src="/public/img/logo.png" alt="">
                </div>
                <div style="display: flex;margin-left: 40px;width: 60%;justify-content: space-around;">
                    <div v-for="item in menu"
                        style="color: #D7EBFA;display: flex;width: 24%;align-items: center;line-height: 55px;justify-content: space-evenly;cursor: pointer;min-width: 140px;"
                        @click="clickMenu(item.id)" :class="active == item.id ? 'mactive' : ''">
                        <img :src="active == item.id ? item.hico : item.ico" alt="">
                        <span>{{ item.name }}</span>
                    </div>
                </div>
            </div>
            <div class="header_right">
                <div>
                    <img src="/img/2.png" alt="">
                </div>
                <el-icon v-if="m_unit == 'yydw'">
                    <span style="width: 200px;position: absolute;float: right;">{{ m_nickname }}</span>
                </el-icon>
                <div class="user_info">
                    <el-dropdown style="cursor: pointer;">
                        <span class="el-dropdown-link">
                            {{ usernm }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item command="a" @click="toupdatePSWD()">
                                    <el-icon>
                                        <Edit />
                                    </el-icon>修改密码
                                </el-dropdown-item>
                                <el-dropdown-item command="e" @click="logout()" divided>
                                    <el-icon>
                                        <SwitchButton />
                                    </el-icon>退出登录
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>
        </div>
        <div style="display: flex;align-items: center;height: 43px;padding: 0 24px;">
            <div style="color: black;display:flex;align-items: center;line-height: 10px;justify-content: flex-start;">
                <div v-for="item in cmenu" class="childitm" @click="checkchilditm(item)" v-show="item.show">
                    <img :src="childact == item.id ? item.hico : item.ico" style="margin-right: 6px;" alt="">
                    <div style="font-size: 14px;color: #888;" :class="childact == item.id ? 'childact mc' : 'mc'">
                        {{ item.name }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref, watch } from "vue";
import { useRouter, useRoute } from 'vue-router';
// import { getNames, getDescriptions } from '../utils/handleroute';
import { ElMessage, ElMessageBox } from 'element-plus';
const unit = ref('');
const role = ref('');
const usernm = ref('');
const router = useRouter();
const route = useRoute();
const lock = ref(false);
//(,,´•ω•)ノ"(´っω•｀。)
const m_unit = ref(localStorage.getItem("unit"));
const m_nickname = ref(localStorage.getItem("nickname"));
const m_grade=ref(localStorage.getItem("grade"));
const menu = ref([
    {
        id: 1,
        name: '行政区划',
        ico: '/img/3.png',
        hico: '/img/3h.png'
    },
    {
        id: 2,
        name: '地图绘制',
        ico: '/img/4.png',
        hico: '/img/4h.png'
    },
    {
        id: 4,
        name: '数据维护',
        ico: '/img/7.png',
        hico: '/img/7h.png'
    },
    {
        id: 3,
        name: '系统设置',
        ico: '/img/5.png',
        hico: '/img/5h.png'
    },

])
const cmenu = ref([]);
const childmenu = ref([
    {
        id: 1,
        name: '行政区划',
        children: [
            {
                id: '1-1',
                name: "区划管理",
                route: "areamain",
                ico: '/img/tb.png',
                hico: '/img/tbico.png',
                show:true
            },
            {
                id: '1-2',
                name: "区划转移管理",
                route: "transer",
                ico: '/img/tb.png',
                hico: '/img/tbico.png',
                show:true
            },
            {
                id: '1-3',
                name: "最新区划",
                route: "newarea",
                ico: '/img/tb.png',
                hico: '/img/tbico.png',
                show:true
            }
        ]
    },
    {
        id: 2,
        name: '地图绘制',
        children: [
            {
                id: '2-1',
                name: "普查小区图",
                route: "plotmap",
                ico: '/img/tb.png',
                hico: '/img/tbico.png',
                show:true
            },
            {
                id: '2-2',
                name: "建筑物地图",
                route: "jzwmap",
                ico: '/img/tb.png',
                hico: '/img/tbico.png',
                show:true
            },
            {
                id: '2-3',
                name: "普查区地图",
                route: "qhmap",
                ico: '/img/tb.png',
                hico: '/img/tbico.png',
                show:true
            },
            {
                id: '2-4',
                name: "成果统计",
                route: "drawResList",
                ico: '/img/tb.png',
                hico: '/img/tbico.png',
                show:true
            }
        ]
    },
    {
        id: 4,
        name: '数据维护',
        children: [
            {
                id: "4-1",
                name: "人口数据",
                route: "workman",
                ico: '/img/tb.png',
                hico: '/img/tbico.png',
                show:true
            },
            {
                id: "4-2",
                name: "GDP数据",
                route: "gdpmain",
                ico: '/img/tb.png',
                hico: '/img/tbico.png',
                show:true
            }
        ]
    },
    {
        id: 3,
        name: '系统设置',
        children: [
            
            {
                id: '3-2',
                name: "修改密码",
                route: "changePWD",
                ico: '/img/tb.png',
                hico: '/img/tbico.png',
                show:true
            },
            {
                id: '3-1',
                name: "用户列表",
                route: "userList",
                ico: '/img/tb.png',
                hico: '/img/tbico.png',
                show:m_grade.value=='1'?true:false
            },
            {
                id: '3-3',
                name: "日志查询",
                route: "statics",
                ico: '/img/tb.png',
                hico: '/img/tbico.png',
                show:m_grade.value=='1'?true:false
            }
        ]
    }
])
const childmenuXZ = ref([
    {
        id: 1,
        name: '行政区划',
        children: [
            {
                id: '1-1',
                name: "区划管理",
                route: "areamain",
                ico: '/img/tb.png',
                hico: '/img/tbico.png',
                show:true
            },
            {
                id: '1-2',
                name: "区划转移管理",
                route: "transer",
                ico: '/img/tb.png',
                hico: '/img/tbico.png',
                show:true
            },
            {
                id: '2-1',
                name: "(乡镇,村)定位",
                route: "village",
                ico: '/img/tb.png',
                hico: '/img/tbico.png',
                show:true
            },
        ]
    },
    {
        id: 2,
        name: '地图绘制',
        children: [
            
            {
                id: '2-2',
                name: "普查区(村居委会)",
                route: "cwh",
                ico: '/img/tb.png',
                hico: '/img/tbico.png',
                show:true
            },
            {
                id: '2-3',
                name: "普查小区",
                route: "xzpcxq",
                ico: '/img/tb.png',
                hico: '/img/tbico.png',
                show:true
            },
            {
                id: '2-4',
                name: "建筑物",
                route: "jzw",
                ico: '/img/tb.png',
                hico: '/img/tbico.png',
                show:true
            },
            {
                id: '2-5',
                name: "成果输出",
                route: "drawresult",
                ico: '/img/tb.png',
                hico: '/img/tbico.png',
                show:true
            }
        ]
    },
    {
        id: 3,
        name: '系统设置',
        children: [
            {
                id: '3-2',
                name: "修改密码",
                route: "changePWD",
                ico: '/img/tb.png',
                hico: '/img/tbico.png',
                show:true
            }
        ]
    }
])
function checkchilditm(e) {
    childact.value = e.id;
    router.push({
        name: e.route
    })
}
const active = ref(2);
const childact = ref('');
function clickMenu(id) {
    active.value = id;
    let grade = localStorage.getItem('grade');
    if (grade == '4') {
        menu.value.forEach((item, index) => {
            if (item.id == 4) {
                menu.value.splice(index, 1);
            }
        })
        childmenuXZ.value.forEach((item, index) => {
            if (item.id == id) {
                cmenu.value = item.children;
                childact.value = item.children[0].id;
            }
        })
    } else {
        childmenu.value.forEach((item, index) => {
            if (item.id == id) {
                cmenu.value = item.children;
                childact.value = item.children[0].id;
            }
        })
    }
}
function logout() {
    ElMessageBox.confirm(
        '确定退出该系统?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        localStorage.removeItem('grade');
        localStorage.removeItem('code');
        localStorage.removeItem('token');
        localStorage.removeItem('unit');
        router.replace({
            name: 'login'
        });
    }).catch(() => {

    });
}

onMounted(() => {
    role.value = localStorage.getItem('role');
    unit.value = localStorage.getItem('unit');
    usernm.value = localStorage.getItem('usernm');
    console.log(route,'route');
    if(route.name=='changePWD'){
        active.value=3;
    }
    clickMenu(active.value);
});
function toupdatePSWD() {
    router.push({
        name: 'changePWD'
    });
}
watch(() => active.value, (nv,ov) => {
    let grade = localStorage.getItem('grade');
    if (grade == '4') {

        childmenuXZ.value.forEach((item, index) => {
            if (item.id == nv) {
                console.log(item.children,'ploat');
                router.push({
                    name:item.children[0].route
                })
            }
        })
    } else {
        childmenu.value.forEach((item, index) => {
            if (item.id == nv) {
                router.push({
                    name:item.children[0].route
                })
            }
        })
    }
})
</script>
<style lang="less">
#cheader {

    .mheader,
    .header_left {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 56px;
    }

    .header_right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 60px;
    }

    .mheader {
        background-image: url('/img/1.jpg');
        border-bottom: 1px #efefef solid;
    }

    .header_left {
        width: 50%;
        justify-content: flex-start !important;
        padding-left: 20px;
    }

    .header_right {
        width: 40%;
        padding-right: 20px;

        .user_info {
            display: flex;

            align-items: center;

        }

        .yhyh {
            padding-left: 5px;
            color: #333;
            font-size: 14px;
        }

        .txdx {
            width: 25px;
            height: 25px;
        }
    }

    .mtabs {
        display: flex;
        justify-content: flex-start !important;
        align-items: center;
        height: 44px;
        padding-left: 20px;
    }

    .fhsy {
        margin-right: 10px;
    }

    .el-tabs--card>.el-tabs__header {
        border-bottom: none !important;
    }


}

.el-tabs__header {
    margin: 0;
}

.el-tabs {
    --el-tabs-header-height: 44px;
}

.el-tabs--card>.el-tabs__header .el-tabs__nav {
    border: none;
}

.el-tabs--card>.el-tabs__header .el-tabs__item {
    border: none;
}

.el-tabs--card>.el-tabs__header .el-tabs__item.is-active.is-closable {
    background: #e8f1ff;
    border-bottom: 2px #1677ff solid;
}



.el-dropdown-link {
    margin-left: 10px;
}


:focus-visible {
    outline: none;
}

.el-dropdown:hover {
    color: #1677ff;
}

.el-header {
    box-shadow: 0 1px 4px -2px #00152914;
    border-bottom: 1px #e4e7ed solid;
}

.mactive {
    color: #FF9900 !important;
    // border-bottom: 1px #FF9900 solid;
    box-shadow: 0px -3px 0px rgba(255, 153, 0, 1) inset;
}

.childitm {
    display: flex;
    align-items: center;
    width: auto;
    padding: 2px 20px;
    box-sizing: border-box;
    // border-left: 1px solid #ccc ;
    border-right: 1px solid #ccc;
    cursor: pointer;
}

.childact {
    color: #FF9900 !important;
}

.tjdf {
    width: 120px;
    font-style: normal;
    font-size: 14px;
    color: #4079c8;
    cursor: pointer;
}

.tjdf:hover {
    color: #f90;
}

.colorr span {
    color: #fff;
}

.el-dropdown-link {
    color: #91B3EB;
}

.el-menu-item-group>ul {
    background: #0f2438;
    color: #fff;
}

.el-menu-item-group>ul li:hover {
    background: #409eff;
}

.el-menu-item * {
    color: #bfcbd9;
}

.el-sub-menu__title:hover {
    background: none;
    color: #fff;
}

.el-sub-menu .el-sub-menu__icon-arrow {
    color: #fff;
}

.el-sub-menu .el-sub-menu__icon-arrow i {
    color: #f60;
}
.childitm:last-child{border:none}
</style>
